<template>
	<view class="">
		<view class="width-95">
			<view class="mt-40 u-text-center pad-t-b-20">
				<view class="font-34 color-333 font-bold pad-t-b-10">欢迎光临 祝您洗车愉快</view>
				<view class="">中铁西城全智动洗车店</view>
			</view>
			<view class="mt-20">
				<view class="title flex">
					<view class="item"></view>
					<view class="text">选择洗车模式</view>
				</view>
				<view class="list1 flex">
					<view class="modeImg"></view>
					<view class="ml-10">
						<view class="font-28 color-333 font-bold">全智动 快速洗车</view>
						<view class="font-24 color-666 pad-t-b-10">洗车时间：约3分20秒</view>
						<view class="">
							<text class="font-34 color-333 font-bold">10</text>
							<text class="font-24 color-666">元</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="mt-20">
			<view class="width-95 title flex">
				<view class="item"></view>
				<view class="text">购卡更优惠</view>
			</view>
				
			<scroll-view scroll-y class="scroll-view">
				<!-- <page-loading :show="pageLoading"></page-loading> -->
				<automatic-list></automatic-list>
			</scroll-view>
		</view>
	</view>

</template>

<script>
import automaticList from './components/automatic.vue';
export default {
	data() {
		return {
			pageLoading: true,
		};
	},
	components: {
		automaticList
	}
};
</script>

<style scoped lang="scss">
.width-95 {
	margin: auto;
}
.title {
	.item {
		width: 8rpx;
		height: 34rpx;
		background: #ffe23e;
		border-radius: 4rpx;
		margin: auto 10rpx;
	}
	.text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
}
.list1 {
	width: 100%;
	padding: 2%;
	margin: 20rpx auto;
	box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 10rpx;
	.modeImg {
		width: 212rpx;
		height: 140rpx;
		background: #dedede;
		border-radius: 10rpx;
	}
}
.scroll-view {
	height: 100%;
}
</style>
